import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { inputConfig } from '../inputConfig';

import { Modal, Input, Button, Steps, Form, Select, Checkbox } from 'antd';

const { Step } = Steps;
const { Option } = Select;

class ApiInput extends Component{
  state={
    visible: false,
    //checkedList: [],
    indeterminate: true,
    checkAll: false,
  }

  handleClick = () => {
    this.setState({visible:true})
  };

  handleOk = () => {
    this.props.formRef.current.setFieldsValue({name:this.props.inputCheckList.length>0?this.props.inputCheckList:undefined});
    this.setState({visible:false});
  }

  handleCancel = () => {
    this.setState({visible:false});
  }
  
  onFieldChange = checkedList => {
    this.props.setInputCheckList(checkedList);
    this.setState({
      indeterminate: !!checkedList.length && checkedList.length < this.props.field.length,
      checkAll: checkedList.length === this.props.field.length,
    });
  };

  onCheckAllChange = e => {
    this.props.setInputCheckList(e.target.checked ? this.props.column : []);
    this.setState({
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  selectConfig = (value) => {
    let config = JSON.parse(value);
    this.props.addOriConfig(this.props.taskId,config.databaseId);
    this.props.getFields(config.databaseId);
    this.props.setInputCheckList([]);
  };

  render(){
    return (
      <Fragment>
        <Form.Item label="接口连接" name="originConfig"
        rules={[{
          required: true,
          message: '请选择接口连接！',
        },]}>
          <Select placeholder="请选择接口连接" onChange={this.selectConfig}>
            {
              this.props.briefWebConfig.map(config => (
                <Option key={config.id} value={JSON.stringify(config)}>{config.configName}</Option>
              ))
            }
          </Select>
        </Form.Item>
        <Form.Item label="字段选择" name="name"
        rules={[{
          required: true,
          message: '请进行字段选择！',
        },]}>
          <Button type="dashed" onClick={this.handleClick}>字段选择</Button>
        </Form.Item>
        <Modal
          title="字段选择"
          visible={ this.state.visible }
          onOk={ this.handleOk }
          onCancel={ this.handleCancel }
        >
          <div style={{ borderBottom: '1px solid #E9E9E9' }}>
            <Checkbox
              indeterminate={this.state.indeterminate}
              onChange={this.onCheckAllChange}
              checked={this.state.checkAll}
            >
              全选
            </Checkbox>
          </div>
          <br />
          <Form.Item>
            <Checkbox.Group
              options={this.props.field}
              value={this.props.inputCheckList}
              onChange={this.onFieldChange}
            />
          </Form.Item>
        </Modal>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    briefWebConfig: state.getIn(['createTask','briefWebConfig']).toJS(),
    field: state.getIn(['createTask','field']).toJS(),
    taskId: state.getIn(['createTask','taskId']),
  }
}

const mapDispatchToProps = (dispatch) => ({
  getFields(databaseId){
    dispatch(actionCreators.getFieldsOperation(databaseId));
  },
  addOriConfig(taskId,databaseId){
    dispatch(actionCreators.addOriConfigOperation(taskId,databaseId));
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(ApiInput);